<template>
	<app-layout>
		<view>
			<scroll-view class="auto-tab" scroll-x>
				<view class="auto-item" v-for="(item, index) in banner" :key="index">
					<view
						class="auto-tab-item cross-center"
						:id="'type' + index"
						:key="index"
						:class="id == item.id ? getTheme + '-m-text ' + getTheme + ' current-type' : ''"
						@click="tabClick(index, item.id)"
					>
						{{ item.title }}
					</view>
				</view>
			</scroll-view>
			<app-rich-text background="#ffffff" :loading="loading" :content="list.content"></app-rich-text>
			<!-- <view class="page" v-html="list.content"></view> -->
		</view>
	</app-layout>
</template>

<script>
import appRichText from '../../../components/basic-component/app-rich/parse.vue';

import { mapState } from 'vuex';

export default {
	data() {
		return {
			loading: true,
			id:0,
			list: {
				content: ' '
			},
			tabCurrentIndex: 0,
			banner: []
		};
	},
	components: {
		appRichText
	},
	methods: {
		tabClick(index,id) {
			this.tabCurrentIndex = index;
			this.id=id
		},
		getList() {
			let that = this;
			this.$request({
				url: that.$api.article.detail,
				data: {
					article_id: that.id
				}
			})
				.then(response => {
					that.$hideLoading();
					if (response.code == 0) {
						that.loading = false;
						that.list = response.data.article;
						setTimeout(function() {
							uni.setNavigationBarTitle({
								title: that.list.title
							});
						}, 0);
					}
				})
				.catch(e => {
					that.$hideLoading();
				});
		},
		async getPage() {
			const res = await this.$request({ url: this.$api.article.list });
			//console.log(res);
			if (res.code == 0) {
				this.banner = res.data.list;
			}
		}
	},
	onLoad(option) {
		this.$showLoading({
			type: 'global',
			text: '加载中...'
		});
		this.id = option.id;
		this.getPage();
		this.$store.dispatch('gConfig/setImageWidth', 48);
	},
	watch:{
		id(value){
			this.getList()
			//console.log(value); 
		}
	},
	// #ifdef MP
	onShareAppMessage() {
		return this.$shareAppMessage({
			title: this.list.title,
			path: '/pages/article/article-detail/article-detail',
			params: {
				id: this.id
			}
		});
	}
	// #endif
};
</script>

<style scoped lang="scss">
.page {
	padding: 0 #{24rpx};
	top: 0;
	left: 0;
	min-height: calc(100vh - 88rpx);
	width: 100%;
	background-color: #ffffff;
	image{
		width: 100%;
	}
}
.auto-tab {
	position: sticky;
	top: var(--window-top);
	left: 0;
	background-color: #ffffff;
	z-index: 1500;
	height: #{88rpx};
	width: 100%;
	white-space: nowrap;
	padding: 0 #{32rpx};
	border-bottom: #{1rpx} solid #e2e2e2;
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
}

.auto-item {
	display: inline-block;
	height: 84upx;
}

.auto-tab-item {
	margin-right: #{42rpx};
	background-color: #ffffff;
	height: 100%;
}

.auto-tab-item.current-type {
	border-bottom: #{4rpx} solid;
}
</style>
